import React, { useEffect, useState } from 'react';
import '@/views/Index/Questions/Questions.scss'
import { useNavigate } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import { Table, Form, Radio, Input, Select, Button, Col, Row, Popover } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { PlusOutlined } from '@ant-design/icons';
import { questions_delete } from '../../../api/dy';
import { useDispatch, useSelector } from 'react-redux';


interface Props {

}

interface DataType {
    key: React.Key;
    id: string;
    question: string;
    type: string;
    category: string;
    edittime: string;
}

function Questions(props: Props) {

    let navigator = useNavigate()
    let dispatch = useDispatch()
    let test_id = useSelector((state: any) => state.test_id)
    // 发请求
    useEffect(() => {
        questionslist({ page: 1, limit: 5 })
    }, [])

    let questionslist = async (payload = {}) => {
        let res = await service.dy.questions_list(payload)
        console.log(res);
        // 给数据添加key属性
        res.data.map((item: any) => {
            item.key = item.id
        })
        setDateSource(res.data)
        setTotal(res.data.length)
    }

    const { Option } = Select;

    const [form] = Form.useForm();

    // 表格数据源
    let [dataSource, setDateSource] = useState<DataType[]>([])

    // 总数量
    let [total, setTotal] = useState()

    // 查询
    let onFinish = async (values: any) => {
        // console.log(values);
        let res = await service.dy.questions_search(values)
        // console.log(res.data);       
        setDateSource(res.data)
        setTotal(res.data.length)
    }

    // 重置
    const onReset = () => {
        form.resetFields();
    };

    // 表头
    const columns: ColumnsType<DataType> = [
        {
            title: '题干',
            dataIndex: 'question',
            align: 'center',
            width: '30%',

        },
        {
            title: '题目类型',
            dataIndex: 'type',
            align: 'center',
        },
        {
            title: '题目分类',
            dataIndex: 'category',
            align: 'center',
            width: '22%',
        },
        {
            title: '最近编辑时间',
            dataIndex: 'edittime',
            align: 'center',
            width: '12%',
        },
        {
            title: '操作',
            align: 'center',
            width: '20%',
            render: (_, record) => {
                return <>
                    <a className='look option_btn' onClick={() => { questionsLook(record.id) }}>
                        预览
                    </a>
                    <a className='edit option_btn' onClick={() => { toQuestionsEdit(record.id) }}>
                        编辑
                    </a>
                    <a className='delete option_btn' onClick={() => { questionsDelete(record.id) }}>
                        删除
                    </a>
                </>
            }
        },

    ];

    // 预览
    let questionsLook = (id: any) => { }
    // 编辑
    let toQuestionsEdit = (id: any) => {
        dispatch({ type: 'SAVE_QUESTIONS_ID', payload: id })
        navigator('/index/questions_edit')
    }
    // 删除
    let questionsDelete = async (id: any) => {
        let res = await service.dy.questions_delete({ id: id })
        questionslist({ page: 1, limit: 5 })
    }
    //   新建
    let toQuestionsAdd = () => {
        navigator('/index/questions_add')
    }

    // 批量管理
    let batchAll = () => {

    }

    // 分页设置
    let pageChange = (page: any, pageSize: any) => {
        // console.log(page, pageSize);
        questionslist({ page: page, limit: pageSize })
    };

    // 复选框(全选/选择)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState(false);

    // 批量管理
    const start = () => {
        setLoading(true);
        // ajax request after empty completing

        dispatch({ type: 'SAVE_QUESTIONS', payload: selectedRowKeys })
        if (test_id) {
            navigator('/index/tests_edit')
        } else {
            navigator('/index/tests_add')
        }
        setSelectedRowKeys([]);
        setLoading(false);

    };

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    // 新建题目的类型
    const content = (
        <div>
            <p>单选题</p>
            <p>多选题</p>
            <p>判断题</p>
            <p>填空题</p>
            <p>问答题</p>
        </div>
    );


    return (
        <div className='questions'>
            <Nav />
            <div className="query">
                <Form
                    className='form'
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                >
                    <Row>
                        <Col span={1}></Col>
                        <Col span={6}>
                            <Form.Item name="type" label="题目类型" rules={[{ required: false }]}>
                                <Select
                                    placeholder="请选择题目类型"
                                    allowClear
                                >
                                    <Option value="">全部</Option>
                                    <Option value="单选题">单选题</Option>
                                    <Option value="多选题">多选题</Option>
                                    <Option value="判断题">判断题</Option>
                                    <Option value="填空题">填空题</Option>
                                    <Option value="问答题">问答题</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}></Col>
                        <Col span={6}>
                            <Form.Item name="name" label="题干" rules={[{ required: false }]}>
                                <Input placeholder='请输入' />
                            </Form.Item>
                        </Col>
                        <Col span={7}></Col>
                    </Row>

                    <Row>
                        <Col span={1}></Col>
                        <Col span={8}>
                            <Form.Item name="starttime" label="最近编辑日期" rules={[{ required: false }]}>
                                <Select
                                    placeholder="开始日期~结束日期"
                                    allowClear
                                >
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={1}></Col>
                        <Col span={6}>
                            <Form.Item name="time" label="" rules={[{ required: false }]}>
                                <Radio.Group size="small">
                                    <Radio.Button value="1">今日</Radio.Button>
                                    <Radio.Button value="2">昨日</Radio.Button>
                                    <Radio.Button value="7">最近7天</Radio.Button>
                                    <Radio.Button value="30">最近30天</Radio.Button>
                                </Radio.Group>
                            </Form.Item>

                        </Col>
                        <Col span={4}></Col>
                        <Col span={3}>
                            <Form.Item>
                                <Button className='search' type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button className='reset' htmlType="button"
                                    onClick={onReset}
                                >
                                    重置
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div className="list">
                <div className="top">
                    <div className="title">
                        题目列表
                    </div>
                    <div className="btn">

                        <Popover placement="bottom" content={content} trigger="click" >
                            <Button className='add' type="primary" icon={<PlusOutlined />} onClick={toQuestionsAdd}>
                                新建
                            </Button>
                        </Popover>
                        <Button className='batch' onClick={start} disabled={!hasSelected} loading={loading}>
                            批量管理
                        </Button>
                    </div>
                </div>
                <Table className='table' rowSelection={rowSelection} dataSource={dataSource} columns={columns} scroll={{ y: 420 }} pagination={{
                    showSizeChanger: false,
                    onChange: pageChange,
                    defaultCurrent: 1,
                    total: total
                }} />
            </div>
        </div>
    );
}

export default Questions;